<template>
	<view v-if="attachment.length > 0">
		<view style="margin: 20rpx">
			<!--				<u-album v-if="imglist && imglist.length>0" :urls="imglist" keyName="url" singleSize="150rpx"></u-album>-->
			<uv-album
				v-if="imglist && imglist.length > 0"
				:urls="imglist"
				keyName="url"
				multipleSize="128rpx"
				space="8rpx"></uv-album>
		</view>
		<view
			style="
				margin: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
			"
			v-for="(pitem, pindex) in pdflist"
			:key="pindex"
			class="pdf-item">
			<!--				<text style="font-size: 26rpx;color: #333;">{{pitem.fileName||pitem.name_file}}</text>-->
			<text style="font-size: 26rpx; color: #333">文件</text>
			<text
				style="color: #1573ff; font-size: 26rpx; white-space: nowrap"
				@click="viewpdf(pitem)"
				v-if="canOpen(pitem)">
				查看
			</text>
		</view>
	</view>
</template>

<script>
	import { deepClone } from '@/uni_modules/uv-ui-tools/libs/function';
	import { listByIds } from '@/api/system/oss';
	import { image } from '@/uni_modules/uv-ui-tools/libs/function/test';

	export default {
		name: 'pic-pdf',
		data() {
			return {
				attachment: [],
				imglist: [],
				pdflist: [],
			};
		},
		computed: {
			// imglist(){
			// 	return this.attachment.filter(item => {
			// 		if ('1' == item.typeFile || '1'==item.type_file) {
			// 			item.url = item.url;
			// 			return item;
			// 		}
			// 	})
			// },
			//
			// pdflist(){
			// 	return this.attachment.filter(item => {
			// 		if ('0' == item.typeFile || '0'==item.type_file) {
			// 			return item;
			// 		}
			// 	})
			// }
		},
		props: {
			value: {
				type: [String, Object, Array],
				default() {
					return [];
				},
			},
		},
		watch: {
			value: {
				deep: true,
				immediate: true,
				async handler(val) {
					if (val) {
						// 首先将值转为数组
						let list;
						if (Array.isArray(val)) {
							list = deepClone(val);
						} else {
							await listByIds(val).then(res => {
								list = res.data;
							});
						}

						// 然后将数组转为对象数组
						this.attachment = list.map(item => {
							// 此处name使用ossId 防止删除出现重名
							item = {
								message: '',
								size: 52363,
								status: 'success',
								thumb: item.url,
								name: item.ossId,
								url: item.url,
								ossId: item.ossId,
								fileName: item.originalName,
								typeFile: image(item.url) ? '1' : '0',
							};
							return item;
						});

						this.imglist = this.attachment.filter(item => {
							if ('1' == item.typeFile || '1' == item.type_file) {
								item.url = item.url;
								return item;
							}
						});

						this.pdflist = this.attachment.filter(item => {
							if ('0' == item.typeFile || '0' == item.type_file) {
								return item;
							}
						});

						console.log(this.imglist);
						console.log('this.imglist');
						console.log(this.pdflist);
					}
				},
			},
		},
		methods: {
			canOpen(item) {
				let fileExtension = item.url.slice(
					item.url.lastIndexOf('.') + 1,
				);
				return (
					'doc, xls, ppt, pdf, docx, xlsx, pptx'.indexOf(
						fileExtension,
					) >= 0
				);
			},
			//支持格式：doc, xls, ppt, pdf, docx, xlsx, pptx。
			viewpdf(item) {
				uni.showLoading();
				let that = this;

				let fileType = 'pdf';
				if (item.url) {
					fileType = item.url.split('.')[1];
				}

				uni.downloadFile({
					url: item.url,
					// filePath: '',
					success(res) {
						uni.hideLoading();

						console.log('下载成功了', res);

						let tempPath = res.tempFilePath;
						uni.openDocument({
							showMenu: true,
							filePath: tempPath,
							// fileType: fileType,
						});
					},
					fail(e) {
						uni.hideLoading();
					},
				});
			},
		},
	};
</script>

<style></style>
